<template>
    <div class="body">
        <!-- <h2>人员管理</h2>
      <p class="info">添加人员</p> -->


        <div class="table_content">


            <div class="table_filtrate">
                <div class="tf_item" style="margin-right: 30px;">
                    <div class="tag">
                        交易类型
                    </div>
                    <el-radio-group v-model="tableParams.transaction_type" size="medium">
                        <el-radio-button label="all">全部</el-radio-button>
                        <el-radio-button label="recharge">充值</el-radio-button>
                        <el-radio-button label="expense">退款</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="tf_item" style="margin-right: 30px;">
                    <div class="tag">
                        审核状态
                    </div>
                    <el-radio-group v-model="tableParams.status" size="medium">
                        <el-radio-button label="all">全部</el-radio-button>
                        <el-radio-button label="await">待审核</el-radio-button>
                        <el-radio-button label="approve">通过</el-radio-button>
                        <el-radio-button label="refuse">驳回</el-radio-button>
                    </el-radio-group>
                </div>

                <div class="tf_item">
                    <el-button @click="loadTableData" type="primary" plain>搜索</el-button>
                </div>
            </div>

            <div class="table">

                <el-table v-loading="table_loading" :data="tableData.data" :border="true">
                    <el-table-column prop="id" label="ID" width="80" align="center">
                    </el-table-column>


                    <el-table-column prop="createtime" label="提审日期">
                    </el-table-column>

                    <el-table-column label="机构名字" align="center">
                        <template slot-scope="scope">
                            <div>{{ scope.row.organization.name }}</div>
                        </template>
                    </el-table-column>



                    <el-table-column label="类型" width="100" align="center">
                        <template slot-scope="scope">

                            <el-tag
                                v-if="scope.row.transaction_type == 'recharge' && scope.row.recharge_type == 'receipts'"
                                type="success" effect="plain">充值</el-tag>
                            <el-tag
                                v-else-if="scope.row.transaction_type == 'recharge' && scope.row.recharge_type == 'replenish'"
                                type="success" effect="plain">补款</el-tag>
                            <el-tag v-else-if="scope.row.transaction_type == 'expense'" type="danger"
                                effect="plain">退款</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="金额" align="center">
                        <template slot-scope="scope">
                            <p v-if="scope.row.transaction_type == 'recharge'" style="color:#67C23A"> +{{
                                scope.row.money }}</p>
                            <p v-else-if="scope.row.transaction_type == 'expense'" style="color:#F56C6C"> -{{
                                scope.row.money }}</p>
                        </template>
                    </el-table-column>


                    <el-table-column label="凭证" width="90">
                        <template slot-scope="scope">
                            <el-image v-for="img in scope.row.voucher_img" style="width: 30px; height: 30px" :src="img"
                                fit="cover"></el-image>
                        </template>
                    </el-table-column>

                    <el-table-column label="备注">
                        <template slot-scope="scope">
                            <div class="text_line">{{ scope.row.remark }}</div>
                        </template>
                    </el-table-column>



                    <el-table-column label="操作人" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.auditor">{{ scope.row.auditor.nickname }}</div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="status_updatetime" label="操作日期" align="center">
                    </el-table-column>


                    <el-table-column label="状态" align="center">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status == 'approve'" type="success" plain>通过</el-tag>
                            <el-tag v-else-if="scope.row.status == 'refuse'" type="info" plain>拒绝</el-tag>
                            <el-tag v-else-if="scope.row.status == 'await'" type="warning" plain>待审核</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" v-if="jsAuthJudgment(['manage','business'])">
                        <template slot-scope="scope">
                            <el-link class="handle" type="primary" v-if="scope.row.status == 'await'"
                                @click="handleTableEdit(scope.$index, scope.row, 'approve')">通过</el-link>
                            <el-link class="handle" type="danger" v-if="scope.row.status == 'await'"
                                @click="handleTableEdit(scope.$index, scope.row, 'refuse')">拒绝</el-link>

                        </template>
                    </el-table-column>
                </el-table>


                <el-pagination class="pagination" @size-change="handleTableSizeChange"
                    @current-change="handleTableCurrentChange" :current-page="currentPage4"
                    :page-sizes="$pageSize" :page-size="tableParams.size" layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.total">
                </el-pagination>

            </div>

        </div>

    </div>
</template>

<script>
import { apiChannelBillListpage } from '@/api/apiFinance'
import { getUploadingImgUrl, getUploadingVideoUrl, getImgUrl } from '@/api/uploading'
import { arrayToString, stringToArray } from '@/utils/arrayUtil'
import { formatTimestamp } from '@/utils/datetimeUtil'
import { appUtil,authJudgment } from '@/utils/appUtil'
export default {
    name: "Index",
    data() {
        return {
            tableParams: {
                page: 1,
                size: 15,
                status: 'all',
                transaction_type: 'all',
            },
            tableData: {
                current_page: 1,
                data: [],
                last_page: 1,
                per_page: "15",
                total: 0
            },
            currentPage4: 1,
            group: [],
            dialogConfig: {
                title: "添加人员"
            },
            table_loading: false,
            dialogFormVisible: false,
            fromViewCofing: {
                input_width: '120px',
                label_width: '120px',
            },
        };
    },
    created() {
        this.loadTableData();
    },
    methods: {
        //图片展示
        imgShow(url) {
            return getImgUrl(url)
        },
        // 权限判断
        jsAuthJudgment(agree_group){
           return authJudgment(agree_group)
        },
        // 列表请求
        loadTableData() {
            const _this = this;
            _this.table_loading = true;
            if (_this.tableParams.fuzzy_search == "") {
                delete _this.tableParams.fuzzy_search;
            }
            if (_this.tableParams.group_id == 0) {
                delete _this.tableParams.group_id;
            }
            apiChannelBillListpage(_this.tableParams)
                .then((response) => {
                    const result = response;
                    var tableData = result.data.datalist;
                    for (var i = 0; i < tableData.data.length; i++) {
                        var imgArray = stringToArray(tableData.data[i]['voucher_img'])
                        for (var j = 0; j < imgArray.length; j++) {
                            imgArray[j] = getImgUrl(imgArray[j]);
                        }
                        tableData.data[i]['voucher_img'] = imgArray;
                        tableData.data[i]['createtime'] = formatTimestamp(tableData.data[i]['createtime']);
                        tableData.data[i]['status_updatetime'] = formatTimestamp(tableData.data[i]['status_updatetime']);
                    }
                    _this.tableData = tableData;
                    _this.table_loading = false;
                })
                .catch(function (result) {
                    _this.$message.error(result.msg);
                    _this.table_loading = false;
                    _this.tableData.data = null;
                });
        },
        // 初始化表单数据
        from_init() {
            this.form = {
                id: 0,
                account: "",
                password: "",
                password_confirmation: '',
                mobile: "",
                nickname: "",
                group_id: "",
                status: "normal",
            }
        },
        // 表格操作
        handleTableEdit(index, row, status) {
            var title = "";
            if (status == 'approve') {
                title = "是否通过该笔交易?";
            } else if (status == 'refuse') {
                title = "是否拒绝该笔交易";
            }

            this.$confirm(title, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                var params = {
                    id: row.id,
                    status: status
                }
                const _this = this;
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                obreply(params)
                    .then((response) => {
                        _this.$message({
                            message: response.msg,
                            type: 'success'
                        });
                        loading.close();
                        _this.loadTableData();
                    })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });

        },

        // 数量改变
        handleTableSizeChange(val) {
            this.tableParams.size = val;
            this.loadTableData();
        },
        // 页数改变
        handleTableCurrentChange(val) {
            this.tableParams.page = val;
            this.loadTableData();
        },
    },
};
</script>

<style lang="scss">
.body {
    padding: 5px;
    background-color: #F5F5F5;


    .table_operate {
        background-color: #fff;

        .btn_add {
            margin-top: 12px;
            margin-bottom: 12px;
            margin-left: 12px;
        }
    }

    .table_filtrate {
        margin-bottom: 10px;
        display: flex;
        background-color: #fff;
        padding: 20px;
        align-items: center;
        border-radius: 12px;


        .tag {
            font-size: 12px;
            color: #424242;
            padding-right: 10px;
        }

        .input {
            padding-right: 30px;
        }


        .input_fuzzy_search {
            width: 230px;
            margin-right: 10px;
        }
    }

}
</style>